import { MenuUnfoldOutlined,MenuFoldOutlined,QuestionCircleOutlined} from '@ant-design/icons';
import { Button, Menu } from 'antd';
import "./index.less"
import { useState } from 'react';
function getItem(label, key, icon, children, type) {
  return {
    key,
    icon,
    children,
    label,
    type,
  };
}
const items = [
  getItem('子菜单一', 'sub1', null, [
    getItem('子菜单1-1', '1'),
    getItem('子菜单1-2', '2'),
  ]),
  getItem('子菜单二', 'sub2', null, [
    getItem('子菜单2-1', '3'),
    getItem('子菜单2-2', '4'),
  ]),
  {
    type: 'divider',
  },
  getItem('子菜单三', 'sub3', null, [
    getItem('子菜单3-1', '5'),
    getItem('子菜单3-2', '6'),
    getItem('子菜单3-3', '7'),
  ]),
];
const App = () => {
const [key,setKey] = useState("")
const [isShowSave,setIsShowSave] = useState(false)
  const [Items,setItems] = useState(items)
  const onClick = (e) => {
    setInputValue(e.domEvent.target.innerText)
    setKey(e.key)
    setIsShowSave(true)
  };
  const inputChange = (e) => {
    setInputValue( e.target.value)
  }
  const [collapsed, setCollapsed] = useState(false);
  const toggleCollapsed = () => {
    setCollapsed(!collapsed);
  };
  const save = (e) => {
    let filterItems = Items.map((item) => {
      item?.children?.map((it) => {
        if(it.key === key) {
          it.label = inputValue
        }
        return null
      })
      return item
    })
    setItems(filterItems)
  }

  const [inputValue, setInputValue] = useState("")
  return (
    <div className='home-wrap'>
        <div className='hometop'>
            <div className='titleleft'>
                <img alt='log' src='https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg'></img>
                <span>react</span>
                <div className='vertical-line'></div>
            </div>
            <div className='titleright'>
                <div className='icon-wrap'>
                    <QuestionCircleOutlined style={{marginRight:"20px"}}></QuestionCircleOutlined>
                    <span>admin</span>
                </div>
            </div>
        </div>
        <div className='homebottom'>
            <div className='menu-left'>
              {
                collapsed ? <MenuUnfoldOutlined onClick={toggleCollapsed} className='iconself' /> : <MenuFoldOutlined onClick={toggleCollapsed} className='iconself' />
              }
              {
                collapsed ? "" : <Menu
                    theme="dark"
                    onClick={onClick}
                    style={{
                        width: 256,
                        height:"100%"
                    }}
                    // defaultSelectedKeys={['1']}
                    // defaultOpenKeys={['sub1']}
                    mode="inline"
                    items={Items}
                />
              }
            </div>
            {
              isShowSave ? <div className='menu-right'>
                <input value={inputValue} onChange = {inputChange} className='input' type="text" name="" id=""/>
                <Button type='primary' onClick={save}>保存</Button>
              </div> : ""
            }
            
            

        </div>
        
    </div>
    
  );
};
export default App;